<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="en">
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <th:block th:include="include :: header('')"/>
    <th:block th:include="include :: headertable"/>
    <script src="/js/layui-xtree.js"></script>

</head>
<body>
<div id="main" style="width:850px;height:660px;"></div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: footertable"/>
</body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<script src="/js/echarts.min.js"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var form;
    layui.use(['form'], function () {
        form = layui.form;
        if (parent.json) {
            var parent_json = parent.json;
            form.val("form", {
                "id": parent_json.id
                // , "name": parent_json.name
                // , "code": parent_json.code
                , "number": parent_json.number
            })
            number_val = parent_json.number;
            var datatime = [], temperatureList = [],humidityList=[],coList = [],o2List = [],ch4List=[],h2sList=[];
            $.ajax({
                url: "/onlineData/brokenLine",
                type: "GET",
                data: { number: number_val},
                success: function (result) {
                    // console.log(result)
                    if (result.status == '1') {
                        // console.log(result)
                        var data = result.data;
                        for (var i = 0; i < data.length; i++) {
                            datatime.push(data[i].createTime);
                            temperatureList.push(data[i].temperature);
                            humidityList.push(data[i].humidity);
                            coList.push(data[i].co);
                            o2List.push(data[i].o2);
                            ch4List.push(data[i].ch4);
                            h2sList.push(data[i].h2s);
                        }

                        var option = {
                            title: {},
                            tooltip: {},
                            legend: {
                                data: ['温度（℃）','湿度（%）','一氧化碳（PPM）','硫化氢（PPM）','甲烷（%l el ）','氧气（%vol）']
                            },
                            xAxis: {
                                data: datatime,
                                name: '时间',
                                nameLocation: 'center',
                                nameGap: 55,
                                axisLabel: {
                                    interval: 0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
                                    rotate: -20    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: ['#224,230,241'],
                                        width: 1,
                                        type: 'solid'
                                    }
                                }
                            },
                            yAxis: {
                                name: '监测值',
                                nameLocation: 'center',
                                nameGap: 50
                            },
                            series: [
                                {
                                    name: '温度（℃）',
                                    type: 'line',
                                    data: temperatureList
                                },
                                {
                                    name: '湿度（%）',
                                    type: 'line',
                                    data: humidityList
                                },
                                {
                                    name: '一氧化碳（PPM）',
                                    type: 'line',
                                    data: coList
                                },
                                {
                                    name: '硫化氢（PPM）',
                                    type: 'line',
                                    data: h2sList
                                },
                                {
                                    name: '甲烷（%l el ）',
                                    type: 'line',
                                    data: ch4List
                                },
                                {
                                    name: '氧气（%vol）',
                                    type: 'line',
                                    data: o2List
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }
                }
            })
        }

    })
    // console.log(number_val);


    // var datatime = [], datavalue = [];
    // $.ajax({
    //     url: "/ht/lineChart.json",
    //     type: "GET",
    //     data: {code: "01"},
    //     success: function (result) {
    //        // console.log(result)
    //         if (result.status=='200') {
    //            // console.log(result)
    //
    //             var  data = result.rows;
    //             for (var i = 0; i < data.length; i++) {
    //                 datatime.push(data[i].createTime);
    //                 datavalue.push(data[i].value);
    //             }
    //
    //             var option = {
    //                 title: {},
    //                 tooltip: {},
    //                 legend: {
    //                     data: ['区域1之房间之氚剂量率-1']
    //                 },
    //                 xAxis: {
    //                     data: datatime,
    //                     name:'时间',
    //                     nameLocation: 'center',
    //                     nameGap :55,
    //                     axisLabel: {
    //                         interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
    //                         rotate:-20    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
    //                     },
    //                     splitLine: {
    //                         show: true,
    //                         lineStyle: {
    //                             color: ['#224,230,241'],
    //                             width: 1,
    //                             type: 'solid'
    //                         }
    //                     }
    //                 },
    //                 yAxis: {
    //                     name: '氚剂量率(Bq/m3)',
    //                     nameLocation: 'center',
    //                     nameGap :50
    //                 },
    //                 series: [
    //                     {
    //                         name: '区域1之房间之氚剂量率-1',
    //                         type: 'line',
    //                         data: datavalue
    //                     }
    //                 ]
    //             };
    //             myChart.setOption(option);
    //         }
    //     }
    // }
    // )
    // ;

    // 基于准备好的dom，初始化echarts实例


    // 指定图表的配置项和数据


    // 使用刚指定的配置项和数据显示图表。

</script>


<!--<script type="text/JavaScript">-->

<!--function loadTwoLine() {-->
<!--var myChart = echarts.init(document.getElementById('main'));-->
<!--// 显示标题，图例和空的坐标轴-->
<!--myChart.setOption({-->
<!--title: {-->
<!--text: '异步数据加载示例'-->
<!--},-->
<!--tooltip: {-->
<!--trigger: 'axis'-->
<!--},-->
<!--legend: {-->
<!--data: ['区域1之房间之Y剂量率-1']-->
<!--},-->
<!--toolbox: {-->
<!--show: true,-->
<!--feature: {-->
<!--mark: { show: true },-->
<!--dataView: { show: true, readOnly: false },-->
<!--magicType: { show: true, type: ['line', 'bar'] },-->
<!--restore: { show: true },-->
<!--saveAsImage: { show: true }-->
<!--}-->
<!--},-->
<!--calculable: true,-->
<!--xAxis: {-->
<!--type: 'category',-->
<!--boundaryGap: false, //取消左侧的间距-->
<!--data: []-->
<!--},-->
<!--yAxis: {-->
<!--type: 'value',-->
<!--splitLine: { show: false },//去除网格线-->
<!--name: ''-->
<!--},-->
<!--series: [{-->
<!--name: '区域1之房间之Y剂量率-1',-->
<!--type: 'line',-->
<!--symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形-->
<!--data: []-->
<!--}]-->
<!--});-->
<!--myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画-->
<!--var names = [];    //类别数组（实际用来盛放X轴坐标值）-->
<!--var series1 = [];-->
<!--$.ajax({-->
<!--type: 'get',-->
<!--url: '/ht/revEquipmentDataList.json',//请求数据的地址-->
<!--dataType: "json",        //返回数据形式为json-->
<!--success: function (result) {-->
<!--//请求成功时执行该函数内容，result即为服务器返回的json对象-->
<!--$.each(result.createTime, function (index, item) {-->
<!--series2.push(item.createTime);-->
<!--});-->
<!--myChart.hideLoading();    //隐藏加载动画-->
<!--myChart.setOption({        //加载数据图表-->
<!--xAxis: {-->
<!--data: names-->
<!--},-->
<!--series: [{-->
<!--data: series1-->
<!--}]-->
<!--});-->
<!--},-->
<!--error: function (errorMsg) {-->
<!--//请求失败时执行该函数-->
<!--alert("图表请求数据失败!");-->
<!--myChart.hideLoading();-->
<!--}-->
<!--});-->
<!--};-->
<!--loadTwoLine();-->
<!--</script>-->


</html>
